<template>
	<div>
		<h1>地图</h1>
		<div id="container" ref="container"></div>
		<input type="text" v-model="option.series[0].data[0]"><br>
		<input type="text"  v-model="option.series[0].data[1]">
	</div>
</template>

<script>
	// 导入echarts
	import * as echarts from 'echarts';
	export default{
		data(){
			return{
				echart:null,
				option:{
					title:{text:"小曾的睡眠时间"},
					legend:{data:["睡眠"]},
					tooltip:{},
					xAxis:{data:[1,2,3,4,5,6,"日"]},
					yAxis:{},
					series:[
						{type:"bar",name:"睡眠",data:[7,6,5,10,2,5,9]}
					]
				}
			}
		},
		mounted(){
			// 实例化对象（使用导入的echarts初始化）（可以不定义就使用吗？可以，建议先定义）
			this.echart = echarts.init(this.$refs.container,"dark");
			// 更新实例
			this.echart.setOption(this.option);
		},
		watch:{
			option:{
				handler(){
					this.echart.setOption(this.option);
				},
				deep:true,
			}
		}
	}
</script>

<style>
	#container{
		width:100%;
		height:80vh;
	}
</style>